// 场景
var scene = new THREE.Scene();
// PerspectiveCamera 透视相机(视野角度，长宽比，近截面，远截面)
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 渲染器
var renderer = new THREE.WebGLRenderer();
// setSize（宽，高，updateStyle使用较低分辨率时设置为false）
renderer.setSize(window.innerWidth, window.innerHeight);
// 渲染器和dom元素，添加到html文档
document.body.appendChild(renderer.domElement);

// 添加立方体
// BoxGeometry立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// MeshBasicMaterial 增加材质使立方体带有颜色
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
// Mesh 将立方体放到网络
const cube = new THREE.Mesh(geometry, material);
// 将网络添加到场景中
scene.add(cube);
// 相机位置移动
camera.position.z = 5;

// 渲染循环/动画循环-将内容真正的渲染到页面上
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}

animate();

